<template>
  <div>
    <el-tabs v-model="editableTabsValue" closable type="card" @tab-remove="removeTab">
      <el-tab-pane
          :key="item.name"
          v-for="(item, index) in editableTabs"
          :label="item.title"
          :name="item.name"
      >
        <component :is="item.componentName" :parameter="item.componentParam"
                   :ref="item.name"></component>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script scoped>
export default {
  name: 'main-operation',
  props: {
    parameter: Object
  },
  components: {},
  computed: {},
  data () {
    return {
      editableTabsValue: '',
      editableTabs: [],
      tabIndex: 0
    }
  },
  methods: {
    removeTab (targetName) {
      let tabs = this.editableTabs
      let activeName = this.editableTabsValue
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1]
            if (nextTab) {
              activeName = nextTab.name
            }
          }
        })
      }
      this.editableTabsValue = activeName
      this.editableTabs = tabs.filter(tab => tab.name !== targetName)
    },
    addSqlPanel (data) {
      let tabData = {
        name: (this.editableTabs.length + 1).toString(),
        title: data.name,
        componentName: 'sqlData',
        componentParam: data,
      }
      this.editableTabs.push(tabData)
      this.editableTabsValue = tabData.name
    },
    addTab (type, data) {
      switch (type) {
        case 'sql-panel':
          this.addSqlPanel(data)
          break
        default :
          console.log(type)
      }
    },
    openTab (param) {
      let type = param.type
      let data = param.data
      //是否存在 存在就打开

      //不纯在新建
      this.addTab(type, data)
    },
    getActiveCompent () {
      return this.$refs[this.editableTabsValue][0]
    }
  },
  mounted () {
  },
  created () {
  }
}
</script>

<style scoped>

</style>
